<template>
  <el-dialog
    title="选择需要上传的文件/文件夹"
    :visible.sync="isshow"
    width="550px"
  >
    <!--    TODO:树状列表后续操作-->
    <div class="dialogContent">
      <el-tree :data="treeData" :props="defaultProps" show-checkbox @check-change="handleCheckChange"
               :default-expanded-keys="expandedKeys" ref="tree" node-key="fileId"
      >
        <div slot-scope="{data}" class="treeitem">
          <div class="treeimg">
            <img :src="data.url" v-if="data.fileType==4"/>
            <img
              :src="FileImage[data.extendName]? FileImage[data.extendName]:require('@/assets/image_library/netmini.png')"
              v-else
            />
          </div>
          <div>{{ data.label + `${data.extendName ? '.' + data.extendName : ''}` }}</div>
        </div>
      </el-tree>
    </div>

    <span slot="footer" class="dialog-footer btns">
      <div>
         <el-button @click="isshow = false">取 消</el-button>
         <el-button type="primary" @click="confirmUpdate">确 定</el-button>
      </div>

  </span>
  </el-dialog>
</template>

<script>
import { getFilePathTree } from '@/api/library_index'
import { uploadMyFileToGroup } from '@/api/library_groupList/groupList'
import { mapGetters } from 'vuex'

export default {
  name: 'uploadfromlibrary',
  data() {
    return {
      isshow: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      expandedKeys: [0],
      newFilePath: '',
      newParentId: '',
      ids: '',
      groupId: '',
      fromType: '',
      checkList: [],
      FileImage: {
        'pdf': require('@/assets/image_library/pdfmini.png'),
        'docx': require('@/assets/image_library/wordmini.png'),
        'dov': require('@/assets/image_library/wordmini.png'),
        'xls': require('@/assets/image_library/excelmini.png'),
        'xlsx': require('@/assets/image_library/excelmini.png'),
        'ppt': require('@/assets/image_library/pptmini.png'),
        'pptx': require('@/assets/image_library/pptmini.png'),
        'txt': require('@/assets/image_library/textmini.png'),
        'zip': require('@/assets/image_library/zipmini.png'),
        'rar': require('@/assets/image_library/zipmini.png'),
        'mp3': require('@/assets/image_library/musicmini.png'),
        null: require('@/assets/image_library/dirsmall.png'),
        'mp4': require('@/assets/image_library/videomini.png')
      }
    }
  },
  computed: {
    ...mapGetters('libraryFile', ['pathArr'])
  },
  methods: {
    show(groupId) {
      this.groupId = groupId
      this.getTree()
      this.isshow = true
    },
    handleCheckChange() {
      // 获取当前选中的节点
      this.checkList = this.$refs.tree.getCheckedNodes(true)
      this.checkList = this.filterArray(this.checkList)
      console.log(this.checkList, 'kkkkk')
    },
    // 过滤选中数据
    filterArray(arr) {
      return arr.filter(item => {
        // 如果 isDir 为 1 且 children.length 为 0，则过滤掉
        if (item.isDir === 1 && !item.children) {
          return false
        }
        // 否则保留
        return true
      })
    },
    async getTree() {
      let res = await getFilePathTree()
      if (res.code == 200) {
        this.treeData = [res.data]
        this.treeData[0].label = '我的文件'
      }
    },
    confirmUpdate() {
      if (this.checkList.length == 0) {
        this.$message.error('请选择上传文件')
        return
      }
      let size = 0
      this.checkList.forEach(e => {
        size += e.fileSize
      })
      let fileList = this.checkList.map(e => {
        return { fileSize: e.fileSize, fileName: e.label, extendName: e.extendName, fileId: e.urlId }
      })
      this.uploadFile(fileList)
    },
    // 上传
    async uploadFile(fileList) {
      let totalSize = fileList.reduce((acc, cur) => {
        return acc + cur.fileSize
      }, 0)
      let filePath = `${this.pathArr[this.pathArr.length - 1].filePath}${this.pathArr[this.pathArr.length - 1].filePath == '/' ? '' : '/'}${this.pathArr[this.pathArr.length - 1].fileName || ''}`
      let parentId = this.pathArr[this.pathArr.length - 1].id
      let res = await uploadMyFileToGroup({
        totalSize: totalSize,
        parentId: parentId,
        filePath: filePath,
        uploadFileList: fileList,
        groupId: this.groupId
      })
      if (res.code == 200) {
        this.$message.success('上传成功')
        this.isshow = false
        this.$parent.getFilesList(parentId, this.groupId)
      }

    }
  }
}

</script>


<style scoped lang="scss">
.dialogContent {
  width: 100%;
  height: 400px;
  overflow: scroll;
}

.treeitem {
  display: flex;
  align-items: center;
}

.treeimg {
  width: 15px;
  height: 16px;

  img {
    width: 15px;
    height: 16px;
  }

  margin-right: 5px;
}

.btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
